<template>
  <div class="header">
    <h1>小涵记事本</h1>
    <input
      v-model="inputValue"
      @keyup.enter="add"
      autofocus="autofocus"
      autocomplete="off"
      placeholder="请输入任务"
      class="new-todo"
    />
  </div>
</template>

<script>
export default {
  name: "MyHeader",
  
  data() {
    return {
      inputValue: "",
    };
  },
  methods: {
    add() {
      // 判断输入的数据
      if (!this.inputValue.trim()) return alert("输入不能为空");
      // 把数据给他爹
      this.$emit('additem',this.inputValue);
      // this.additem(this.inputValue);
      //   把当前输入框清空
     
      this.inputValue = "";
    },
  },
};
</script>

<style>
.new-todo,
.edit {
  position: relative;
  margin: 0;
  width: 100%;
  font-size: 24px;
  font-family: inherit;
  font-weight: inherit;
  line-height: 1.4em;
  border: 0;
  color: inherit;
  padding: 6px;
  border: 1px solid #999;
  box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
}
.new-todo {
  padding: 16px;
  border: none;
  background: rgba(0, 0, 0, 0.003);
  box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
}
</style>